<template>
  <div class="balanceWater_box">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :head-height= '0'>
       <div class="tradtop_box">
      <!-- 菜单 -->
      <div class="head_top">
        <div>
          <i class="iconfont"   ></i>
        </div>
        <div>{{$t("lang.tradingfloor")}}</div>
        <div  @click="showProp">
          <i class="iconfont icon-more1"  ></i>
        </div>
      </div>
      <!-- 流通分 -->
      <div class="top_jybg">
				<h2>{{ltfyr}}</h2>
				<p>{{$t("lang.balance")}}</p>
        
			</div>
    </div>
		
    <div class="bottop">
			<!-- 图表内容部分 -->
			<div>
				<!-- <tfc-chart title="本月价格走势图" v-if="quotationData.date" :chartData="quotationData"></tfc-chart> -->
				<!-- <tfc-chart title="CEC 交易量 (V)" v-if="volumeData.date" :chartData="volumeData"></tfc-chart> -->
			</div>
      <!-- 交易模块 -->
      <section class="tradIndex_input">
        <div class="setbi_box">
          <div class="ul_bibox">
            <div class="useabble">
              <div class="coinbot">
                <p>{{$t("lang.sellNUms")}}</p> 
                <div class="tflex">
                  <input type="number" v-model="sellOutNum"  class="coinnum"  :placeholder="$t('lang.enterSNum')">
                </div>
              </div>
              <div class="coinbot">
                <p>{{$t("lang.scccPword")}}</p>
                <input type="password" v-model="outpayWord" class="coinnum"  :placeholder="$t('lang.enterSpword')">
              </div>
            </div>
          </div>  
        </div>
        <div class="sure_btn">
          <van-button type="primary" size="large"  @click="sellFraction">{{$t("lang.C2CSellout")}}</van-button>
        </div>
      </section>
      <div class="marktitle">
        <h3>{{$t("lang.MarCanced")}}</h3>
      </div>
          <van-list v-show="TradinfoList.length>0" v-model="loading" :finished="finished" @load="loadMore" :offset="20">
            <ul class="trad_list">
              <li v-for="item in TradinfoList" :key="item.index">
								<div class="nflex npadd">
									<h4 data-id="item.id">{{$t("lang.orderNum")}}：{{item.tradeSerial}}</h4>
									<p class="buybtn" @click="buyListBtn(item)">{{$t("lang.BuyBtnnow")}}</p>
								</div>
								<div class="nborder">
									<div class="nflex ">
										<p>{{$t("lang.Numberofstores")}}</p>
										<p>{{item.tradeAmount}}</p>
									</div>
									<!-- <div class="nflex">
										<p>单价</p>
										<p>{{item.tradePrice}}</p>
									</div> -->
                  <!-- <div class="nflex">
                    <p>{{$t("lang.Utime")}}</p>
                    <p>{{item.createTime}}</p>
                  </div> -->
								</div>
								<div class="npadd nflex">
									<h4>{{$t("lang.acombined")}}：${{(item.tradePrice*item.tradeAmount).toFixed(3)}}</h4>
                  <!-- <p class="buybtn" @click="buyListBtn(item)">{{$t("lang.BuyBtnnow")}}</p> -->
								</div>	
							</li>
            </ul>
          </van-list>
          <div v-if="TradinfoList.length==0" class="no_data">
              <img src="../../assets/img/my/nodata.png" alt="" srcset="">
              <span>{{$t("lang.NoData")}}</span>  
          </div>
    </div>
    <van-popup v-model="showMenuProp" position="top" :overlay="true" class="showmenu">
      <div class="test_triangle_border">
          <div class="popup">
               <span><em></em></span>
              <ul>
                <li @click="pushPath('/myGsingle')">{{$t("lang.Mydeity")}}</li>
                <li @click="pushPath('/MyTrading')">{{$t("lang.Mytrading")}}</li>
                <li @click="pushPath('/tradingRecord')">{{$t("lang.tradingRecord")}}</li>
              </ul>
          </div>
      </div>
    </van-popup>
      <!-- <p>刷新次数: {{ count }}</p> -->
    </van-pull-refresh>
    <!-- <my-header :showBack="true" title="交易大厅"  :showRight="true"  @rightAction="showPeopleProp" rightText="我的"  ></my-header> -->
  </div>
</template>

<script>
import header from '@/components/header'
import timeFormat from '../../store/timeFormat';
import chart from "@/components/chart.vue";
import { Toast } from 'vant';

export default {
  components: {
		'my-header': header,
		"tfc-chart": chart,
  },
  data() {
    return {
      selected: "income",
      searchCondition: {  //分页属性  
        pageNo: 1,  //当前页
        pageSize: 20,//每页20条
        tradeType: 1,
        status: 1
      },
      USdollar:"6.8962",//1美元==6.8962RMB
			quotationData:" ",
      loading:false,
      finished:true,
      showMenuProp: false,
      incomeTotal:0,
      TradinfoList:[ ],
      ltfyr:"",
      // 输入框
      sellOutNum:"",
      outpayWord:"",
      // 下拉刷新
      isLoading: false,

      // 倒计时
      daojishi:10,
      // 
      jiaoyi:false,
    }
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
  },
  mounted () {
    this.$store.commit("updateSelected", 1);
    this.$store.commit("updateNeedShowFooter", true);
    // this.getIndexChart();
    
  },
  created() {
    this.selectTradeList();
    this.selectAccount();
    // console.log(this.$t,1111111111111)
  },
  watch: {

  },
  methods: {
    getIndexChart(){
      // echart
      this.$ajax(this.$api.selectTradeTable).then(res => {
        if (res.code == 0) {
          this.quotationData = res.msg;
        }
      });
    },
    onRefresh() {
      setTimeout(() => {
        // this.isLoading = true;
        this.$toast('刷新成功');
        // console.log("刷新")
         this.selectTradeList();
        this.selectAccount();
        this.isLoading = false;
      }, 500);
    },
    selectAccount(){
      // 个人资产
      this.$ajax(this.$api.selectAccount).then(
        res=>{
          if(res.code==0){
            this.MyAsset=res.msg;
            const UseStock = res.msg.useStock;
            const DeliveryStock = res.msg.deliveryStock;
            const FixedStock = res.msg.fixedStock;
            const DynamicMoney = res.msg.dynamicMoney;
            const StaticMoney = res.msg.staticMoney;
            const ActivationPoint = res.msg.activationPoint;
            const UsePoint = res.msg.usePoint;
            const RegisterPoint = res.msg.registerPoint;
            const UseBonus = res.msg.useBonus;
            
            var listArr=new Array();
            listArr =[{Name:'可用股权',num:UseStock},{Name:'配送股权',num:DeliveryStock},{Name:'定期股权',num:FixedStock},
        {Name:'动态配套',num:DynamicMoney},{Name:'静态配套',num:StaticMoney},{Name:'激活分',num:ActivationPoint},
        {Name:'流通分',num:UsePoint},{Name:'注册分',num:RegisterPoint},{Name:'奖金',num:UseBonus},]
            console.log(res.msg);
            console.log(listArr);
            // this.JifenList=listArr;
            this.ltfyr=res.msg.usePoint.toFixed(3);
          }
        }
      )
    },
		showProp(){
      this.showMenuProp=true;
    },
    selectTradeList(){
      this.$ajax(this.$api.selectTradeList,{tradeType:1}).then(res => {
        if (res.code === 0 && res.msg) {
          this.TradinfoList=res.msg.list;
          // console.log(this.TradinfoList);
          
        }
      });
    },
    loadMore: function() {
      this.searchData.pageNo += 1;
      this.$ajax(this.$api.selectProfit, this.searchData).then(res => {
        this.loading = false;
        if (res.code === 0) {
          if (res.msg && res.msg.list.length > 0) {
            this.TradinfoList = this.TradinfoList.concat(res.msg.list);
            this.finished = this.searchData.pageNo == res.msg.lastPage;
            this.loading = false;
          }
        }
      });
    },
    See (e) {
        window.location.href = e
    },
    buyListBtn(item){
      const buyId=item.id;

      const index = this.$layer.confirm('您确定要购买？确认购买后要12小时内付款!!!', () => this.doBuy(item), () => alert('no'))
      setTimeout(() => {
        this.selectTradeList();
        this.selectAccount();
      }, 0)
      setTimeout(() => {
          this.$layer.close(index)
      }, 10000)
    },

     doBuy(item){
      const buyId=item.id;
      this.$ajax(this.$api.matchTrade,{id:buyId}).then(res => {
        if (res.code === 0 && res.msg) {
            Toast({message: res.msg,position: "bottom"});
            // this.selectTradeList();
            // 跳转页面 /MyTrading
            this.$router.replace('/MyTrading')
          }else{
            Toast({message: res.msg,position: "bottom"});
            return 
          }
        });
      
    },


    // 流通分交易
    sellFraction(){
      if (!this.$validator.isInt(this.sellOutNum)) {
        Toast({ message: this.$t('lang.EnterTrueNum'), position: "bottom" });
        return;
      } 
      if(!this.$validator.isPassword(this.outpayWord)){
        Toast({message: this.$t('lang.enterSpword'),position: "bottom"});
        return;
      }
      if(this.jiaoyi == true){
        Toast('交易中  请等待');
        return false
      }
      Toast.loading({
        mask: true,
        message: '交易中请等待...'
      });
      this.jiaoyi = true;
      this.sellOutPrice=1;//传个默认值不接收
      this.$ajax(this.$api.pushTrade,{tradeType:1,tradePrice:this.sellOutPrice,tradeAmount:this.sellOutNum,payPass:this.outpayWord}).then(res => {
        if (res.code === 0 && res.msg) {
          Toast({ message: this.$t('lang.CZsuccessful'), position: "bottom" });
          this.sellOutPrice="";
          this.sellOutNum="";
          this.outpayWord="";
          this.jiaoyi = false;
        }else{
          Toast({ message: res.msg, position: "bottom" });
          this.jiaoyi = false; 
        }
      });
    }
  }
}
</script>

<style lang='less' scoped>
.balanceWater_box {
  background: #f6f6f6;color: #999999;
}
.bottop{border-top: 1px solid #eeeeee;margin-bottom: 50px;}
// head_top
.head_top{
	width: 100%;
  height: 44px;
	line-height: 44px;
  font-size: 16px;
  color: #ffffff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;    
}
.head_top i{
  padding:10px;
  font-size: 20px;
}
.head_top div:nth-child(1) {
  width:20%;
  box-sizing: border-box;
}
.head_top div:nth-child(2) {
  width:60%;
  text-align:center;
}
.head_top div:nth-child(3) {
  width:20%;
  text-align:center;
  font-size:12px;
}
.head_top + div {
  position: absolute;
  width: 100%;
  top: 44px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.top_jybg{
	// background:linear-gradient(150deg,rgba(172,6,0,1) 0%,rgba(135,2,0,1) 100%);
	height: 100px;
	box-sizing: border-box;
  text-align: center;
  h2{font-weight:bold;font-size: 30px;padding-top: 35px;color: #E1AF56;}
  p{color:#AA7A24;}
}
.trad_list{
	background: #f6f6f6;
	li{
		box-sizing: border-box;padding:0 12px;background:#ffffff;margin-top:5px;
		h4{color: #333333;}
		.nflex{display: flex;justify-content:space-between ;}
		.nborder{border-top: 1px solid #F6F6F6;border-bottom: 1px solid #F6F6F6;
      p{line-height: 26px;color: #999999;}
      p:nth-child(2){color: #666666;}
		}
		.npadd{padding: 10px 0;}
		.buybtn{color: #FF4954;border: 1px solid #FF4954;border-radius: 20px;padding: 0 6px}	
	}
}
// prop层
.showmenu{
  text-align: center;color: #333333;background:transparent;height: 200px;position: absolute;top:35px;right: 0;
  li{height: 35px;line-height: 35px;border-bottom: 1px solid #eeeeee;}
  li:nth-child(2){border-bottom: none;}
}
.test_triangle_border{
    width:200px; 
    margin:0 auto 20px;
    
}
.test_triangle_border a{
    color:#333;
    font-weight:bold; 
    text-decoration:none;
}
.test_triangle_border .popup{
    width:120px;
    background:#ffffff; 
    // padding:10px 20px; 
    color:#333;  
    border-radius:4px;
    position:absolute; 
    top:10px; 
    right:2vw;
    border:1px solid #333;
}
.test_triangle_border .popup span{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #333; 
    position:absolute; 
    top:-10px; 
    left:70%;/* 三角形居中显示 */
    margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
    display:block; 
    width:0; 
    height:0; 
    border-width:0 10px 10px; 
    border-style:solid; 
    border-color:transparent transparent #ffffff; 
    position:absolute; 
    top:1px; 
    left:-10px;
}
.marktitle{
  border-bottom: 1px solid #eeeeee;padding: 12px 0;background:#ffffff;
  h3{padding-left: 12px;color: #333333;box-sizing: border-box;}
}
// 输入框
.tradIndex_input{background: #ffffff;margin-bottom: 5px;}
.useabble{
  box-sizing: border-box;padding:0 12px;
  input{width: 100%;border:none;height: 30px;}
  .coinnum{font-size: 16px;background: #ffffff;}
  .coinbot{
    border-bottom: 1px solid #eeeeee;padding: 15px 0 12px 0;
    p{padding-bottom: 5px;color: #333333;font-size: 14px;}
    }
}
// 新加的背景
.tradtop_box{
  background: url(../../assets/img/assetIndex/grzx_dhzx.png) 0 0 no-repeat;
  height: 180px;
}
</style>
